<template>
	<view class="container" @touchmove.stop.prevent="">
		<view class="status-bar"/>
		<view class="personal-info" @click="toEditInfomation">
			<view class="portrait">
				<image src="@/static/img/head.jpg" style="width: 150rpx;height: 150rpx; border-radius: 75rpx;"></image>
			</view>
			<view class="infomation">
				<view style="display: flex; flex-direction: column; justify-content: center;right: 200rpx;">
					<text class="nick-name" style="margin-bottom: 15rpx;" value>{{nickName}}</text>
					<text class="user-account">账号: {{userAccount}}</text>
				</view>	
				<view style="position: absolute; padding-top: 40rpx; right: 40rpx;">
					<image src="@/static/img/QR_code_icon.png" mode="aspectFit" style="width: 75rpx;height: 75rpx;">
					<myp-icon name="right" type="text" size="l"></myp-icon>					
					
				</view>			
			</view>		
		</view>
		<view class="function">
			<myp-list ref="myp-list" :showScrollbar="false" :useLoading="false" :down="upload" :up="upload">
				<myp-list-cell v-for="(item,idx) in funtion_items" :key="idx">
					<myp-cell :icon="item.icon" :title="item.name" :iconStyle="item.iconStyle" border="all" radius="s" boxStyle="padding-left:32rpx;padding-right:32rpx;margin-bottom:20rpx;border-radius:10rpx" indicator="right"></myp-cell>
				</myp-list-cell>
			</myp-list>
			
			
		</view>		
		
	</view>
</template>

<script>
	export default {
		created() {
			this.user = uni.getStorageSync('user');
			console.info(this.user);
			if(this.user == null) {
			this.$Router.replace({name: "login"});
			}
			this.userAccount = this.user.userAccount;
			this.nickName = this.user.nickName;
		},
		data() {
			return {
				user: null,
				userAccount: "",
				nickName: "",
				funtion_items: [
					{
						name: "支付",
						icon: "success",
						iconStyle: "color: green;",
						
		
					},
					{
						name: "钱包",
						icon: "sale",
						iconStyle: "color: yellow;",
					},
					{
						name: "设置",
						icon: "setting"
					},
					
				],
				upload:{
					use: false,
				}
				
			};
		},
		methods: {
			toEditInfomation() {
				console.info("进入个人详细页面");
				this.$Router.push({name: "mineInfomation"});
			},
		}
	}
</script>

<style>
	@import url("@/static/global.css");
	.container {
		width: 750rpx;
		background: #D3D3D3;
		
		
	}
	.portrait{
		margin-left: 40rpx;
		margin-right: 50rpx;
		margin-top: 40rpx;
	}
	.personal-info {
		display: flex;
		background: #ffffff;
		width: 100%;
		padding-bottom: 50rpx;
		position: relative;
	}
	.nick-name {
		font-size: larger;
	}
	.user-account {
		font-size: small;
		color: #AAAAAA;
	}
	.infomation {
		display: flex;
		flex-direction: row;
		justify-items: center;
	}

</style>
